import { PropType, computed, defineComponent } from "vue";
import "./index.scss"
import { AboutPageType } from "@Tea/model";


const useImportImage = function (path:string) {
  return computed(() => new URL(path, import.meta.url).href)
}

export default defineComponent({
  props: {
    detail: Object as PropType<AboutPageType>
  },
  setup(props, ctx) {
    return () => (
      <div class="m-window-personnel allCenter-v">
        <div class="m-box">
          {/* <div class="m-logo">
            <img src={useImportImage("./assets/logo.png").value} alt="" />
          </div> */}
          <div class="m-middle">
            {
              props.detail.memberList.map(member => (
                <div class="m-item">
                  <div class="m-title">{member.positionName}</div>
                  <div class="m-image">
                    <img src={useImportImage(`./assets/${member.positionCode}.png`).value} alt="" />
                  </div>
                  <div class="m-list">
                    <ul>
                      {
                        member.list.map(m => (
                          <li key={m.memberName}>{m.memberName}</li>
                        ))
                      }
                    </ul>
                  </div>
                </div>
              ))
            }
          </div>
          <div class="m-footer">
            <div class="m-time">上线时间：{props.detail.onlineTime}</div>
          </div>
        </div>

      </div>
    )
  },
})